<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="订单号/会员姓名/手机号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="searchForm">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            
            <table id="orderTable" lay-filter="orderTable"></table>
        </div>
    </div>
</div>

<script src="/app/admin/component/layui/layui.js"></script>
<script>
layui.use(['table', 'form', 'laydate', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    // 日期范围选择
    laydate.render({
        elem: '#dateRange',
        range: true
    });
    
    // 表格实例
    table.render({
        elem: '#orderTable',
        url: '/app/ky_shouyin/admin/order/list',
        toolbar: '#toolbarTpl',
        defaultToolbar: ['filter', 'exports'],
        cols: [[
            {field: 'order_no', title: '订单号', width: 180},
            {field: 'member_name', title: '会员姓名', width: 100},
            {field: 'member_phone', title: '手机号', width: 120},
            {field: 'total_amount', title: '订单金额', width: 100},
            {field: 'discount_amount', title: '优惠金额', width: 100},
            {field: 'paid_amount', title: '实付金额', width: 100},
            {field: 'pay_type', title: '支付方式', width: 100, templet: function(d){
                var payTypes = {1: '在线支付', 2: '现金支付', 3: '余额支付'};
                return payTypes[d.pay_type] || '未知';
            }},
            {field: 'status', title: '订单状态', width: 100, templet: '#statusTpl'},
            {field: 'staff_name', title: '操作员', width: 100},
            {field: 'store_name', title: '门店', width: 120},
            {field: 'created_at', title: '创建时间', width: 160},
            {title: '商品信息', minWidth: 300, templet: function(d){
                var html = '';
                d.goods.forEach(function(item){
                    html += '<div class="order-goods">';
                    html += '<span>' + item.goods_name + '</span>';
                    html += '<span>￥' + item.goods_price + '</span>';
                    html += '<span>x' + item.quantity + '</span>';
                    html += '<span>=' + item.final_amount + '</span>';
                    html += '</div>';
                });
                return html;
            }},
            {fixed: 'right', title: '操作', toolbar: '#tableBar', width: 130}
        ]],
        page: true,
        limit: 10,
        limits: [10, 20, 50, 100]
    });
    
    // 搜索表单提交
    form.on('submit(searchForm)', function(data){
        var dateRange = $('#dateRange').val();
        var dates = dateRange.split(' - ');
        
        table.reload('orderTable', {
            page: {curr: 1},
            where: {
                keyword: data.field.keyword,
                start_date: dates[0],
                end_date: dates[1]
            }
        });
        return false;
    });
    
    // 表格行工具事件
    table.on('tool(orderTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.open({
                type: 2,
                title: '订单详情',
                content: '/app/ky_shouyin/admin/order/detail?id=' + data.id,
                area: ['80%', '90%'],
                maxmin: true
            });
        } else if(obj.event === 'refund') {
            layer.confirm('确定要对此订单进行退款操作吗？', {
                btn: ['确定','取消']
            }, function(){
                $.post('/app/ky_shouyin/admin/order/refund', {
                    id: data.id
                }, function(res){
                    if(res.code === 0){
                        layer.msg('退款成功');
                        table.reload('orderTable');
                    } else {
                        layer.msg(res.msg || '退款失败');
                    }
                });
            });
        }
    });
});
</script>

<style>
.order-goods { margin: 5px 0; }
.order-goods span { margin-right: 10px; }
</style>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    {{# if(d.status === 1 && d.is_refunded === 0){ }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refund">退款</button>
    {{# } }}
    <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
</script>

<!-- 订单状态模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.status === 0){ }}
        <span class="layui-badge layui-bg-gray">待支付</span>
    {{# }else if(d.status === 1){ }}
        <span class="layui-badge layui-bg-green">已支付</span>
    {{# }else if(d.status === 2){ }}
        <span class="layui-badge layui-bg-orange">已退款</span>
    {{# }else if(d.status === 5){ }}
        <span class="layui-badge layui-bg-gray">已取消</span>
    {{# }else{ }}
        <span class="layui-badge layui-bg-blue">其他状态</span>
    {{# } }}
</script>
</body>
</html>